import React, {Ref, useEffect, useImperativeHandle, useRef, useState} from "react";
import styles from "./index.less"

export interface NameProps {
    innerRef: Ref<{ signaturesHeight: number }>;
    showOrHiddenSignatures: boolean;
}

let signaturesAnimationTag = 0;
const Name = (props: NameProps) => {
    const signaturesRef = useRef<HTMLDivElement>(null)
    const generateSignaturesAnimation = () => {
        let tempClassName: string = "";
        if (props.showOrHiddenSignatures) {
            tempClassName = styles["signatures-fade-in"];
            signaturesAnimationTag = 1;
        }
        if (!props.showOrHiddenSignatures && signaturesAnimationTag) {
            tempClassName = styles["signatures-fade-out"]
        }
        return tempClassName;
    }
    return <>
        <div className={styles["name"]}>周磊 (朝与暮)</div>
        <div className={styles["word"]}>在路上的前端开发...</div>
        <div ref={signaturesRef}
             className={`${styles["word"]} ${styles["signatures"]} ${generateSignaturesAnimation()}`}
        >吾身如浮萍,不敢言会,若天眷顾,得挚友二三。
        </div>
    </>
}
export default Name;